<!--
 * @Author: quit
 * @Date: 2021-12-08 10:37:09
 * @LastEditTime: 2021-12-21 15:32:19
 * @Descripttion: 类型模板
-->
<template>
  <div id="SubModeManager">
    <div class="app-container" style="height: 100%">
      <el-row :gutter="5">
        <!-- 左侧 -->
        <el-col :span="4" class="left">
          <el-card>
            <div v-loading="treeLoading" class="item-box">
              <el-input v-model="filterText" class="tree-search" placeholder="输入关键字进行过滤" />
              <el-tree ref="tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode" @node-click="handleNodeClick" />
            </div>
          </el-card>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="20" class="right">
          <el-card>
            <el-row class="right-container">
              <el-col>
                <el-divider content-position="left">搜索信息</el-divider>
                <div class="search">
                  <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
                    <el-form-item :label="'类型'">
                      <el-input v-model="searchFrom.subsysname" disabled :placeholder="'请选择类型名'" />
                    </el-form-item>
                    <el-form-item :label="'类型变量名'">
                      <el-input v-model="searchFrom.mitemname" :placeholder="'请输入类型变量名'" />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-zoom-in" @click="getSubModeList">{{ $t('button.search') }}</el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-refresh-right" @click="refresh">{{ '重置' }}</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              <el-col class="btns">
                <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItemsBtn">{{ '添加类型模板' }}</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchRemove">{{ $t('button.batchRemove') }}</el-button>
              </el-col>
              <el-col>
                <el-table
                  ref="table"
                  v-loading="loading"
                  :max-height="maxHeight"
                  :data="tableData"
                  :empty-text="$t('table.emptyText')"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" min-width="40" fixed="left" />
                  <el-table-column prop="subsysmodeid" label="ID" min-width="80" fixed="left" />
                  <el-table-column prop="subsystemid" :label="'类型ID'" min-width="80" fixed="left" />
                  <el-table-column prop="mitemname" :label="'变量名'" min-width="160" />
                  <el-table-column prop="mitemreadorwrite" :label="'读写属性'" min-width="80" />
                  <el-table-column prop="mitemlevel" :label="'排序'" min-width="80" />
                  <el-table-column prop="miteminitvalue" :label="'初始值'" min-width="100" />
                  <el-table-column prop="mitemunit" :label="'单位'" min-width="80" />
                  <el-table-column prop="mitemishistory" :label="'历史'" min-width="80" />
                  <el-table-column prop="mitemisenergy" :label="'能耗'" min-width="80" />
                  <el-table-column prop="mitemisalarm" :label="'报警'" min-width="80" />
                  <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="200">
                    <template slot-scope="scope">
                      <el-button type="warning" size="mini" @click="handleEdit(scope.row)">{{ $t('button.edit') }}</el-button>
                      <el-button type="danger" size="mini" @click="handleDetele(scope.row)">{{ $t('button.delete') }}</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                  :current-page="pages.page"
                  :page-sizes="[1, 5, 10, 15]"
                  :page-size="pages.size"
                  layout="prev, pager, next, total, sizes, jumper"
                  :total="pages.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 添加\修改弹出层 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="75%" @close="addDialogClose">
      <div class="add-dialog-container">
        <el-form ref="addFrom" :model="addDialogForm">
          <el-divider content-position="left" class="one">基本信息</el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="变量名" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.mitemname" placeholder="请填写变量名" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量类型" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.mitemdatatype" placeholder="请选择变量类型" clearable>
                  <el-option v-for="(item, index) in mitemdatatypeData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="读写类型" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.mitemreadorwrite" placeholder="请选择读写类型" clearable>
                  <el-option v-for="(item, index) in mitemreadorwriteData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量排序" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.mitemlevel" placeholder="请填写变量排序" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="变量值" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.miteminitvalue" placeholder="请填写变量值" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="变量阈值" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.thresholdid" placeholder="请选择变量阈值" clearable>
                  <el-option v-for="(item, index) in thresholdidData" :key="index" :label="item.thresholdname" :value="item.thresholdid" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.mitemunit" placeholder="请填写单位名称" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计算公式" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.mitemmaths" placeholder="请填写计算公式" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="采集时间" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.mitemtime" placeholder="请填写采集时间" autocomplete="off">
                  <template slot="append">单位 : 毫秒</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否历史" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.mitemishistory" placeholder="请选择历史模式" clearable>
                  <el-option v-for="(item, index) in mitemishistoryData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否能耗" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.mitemisenergy" placeholder="请选择能耗模式" clearable>
                  <el-option v-for="(item, index) in mitemisenergyData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否报警" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.mitemisalarm" placeholder="请选择报警模式" clearable>
                  <el-option v-for="(item, index) in mitemisalarmData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left" class="two">报警信息</el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="报警级别" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.subsysalarmlevel" placeholder="请选择报警级别" clearable>
                  <el-option v-for="(item, index) in subsysalarmlevelData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报警分类" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.subsysalarmsort" placeholder="请选择报警分类" clearable>
                  <el-option v-for="(item, index) in subsysalarmsortData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报警说明" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmdescribe" placeholder="请填写报警说明" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="延时报警" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmsleep" placeholder="请填写延时时间" autocomplete="off">
                  <template slot="append">精确位数</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="报警类型" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.subsysalarmtype" placeholder="请选择报警类型" clearable>
                  <el-option v-for="(item, index) in subsysalarmtypeData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="开关量报警" :label-width="formLabelWidth" prop="appname">
                <el-select v-model="addDialogForm.subsysalarmonoff" placeholder="请选择开关量报警" clearable>
                  <el-option v-for="(item, index) in subsysalarmonoffData" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="偏移报警" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmdeviation" placeholder="请填写偏移报警" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="偏移值" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmdeviationinitvalue" placeholder="请填写偏移值" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="低低限" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmminimini" placeholder="请填写低低限" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="低限" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmmini" placeholder="请填写低限" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="高限" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmmax" placeholder="请填写高限" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="高高限" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmmaxmax" placeholder="请填写高高限" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item class="alone" label="报警样式" :label-width="formLabelWidth" prop="appname">
                <el-input v-model="addDialogForm.subsysalarmcss" placeholder="请填写报警样式" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="addDialogState === 0" type="primary" @click="sendAddItem">确 定</el-button>
        <el-button v-if="addDialogState === 1" type="primary" @click="sendEditItem">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import { getData } from '@/utils/auth'
import { getSubModeList, addSubModeItem, editSubModeItme, deteleSubModeItme, deleteSubModeList } from '@/api/BotRequest'
import { getSubSysInfo, getThresholdList } from '@/api/BmRequest'

export default {
  components: {},
  data() {
    return {
      botData: {},
      treeData: [],
      filterText: '',
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'subsysname'
      },
      searchFrom: {
        mitemname: null,
        subsysname: null,
        subsystemid: null
      },
      maxHeight: null,
      loading: false,
      isCheckedArr: [],
      tableData: [],
      pages: {
        page: 1,
        size: 10,
        total: 0
      },
      dialogTitle: '',
      addDialogState: null,
      dialogVisible: false,
      addDialogForm: {
        appid: null,
        subsystemid: null,
        mitemname: null,
        mitemdatatype: null,
        mitemreadorwrite: null,
        mitemnum: null,
        mitemnumdescribe: null,
        mitemlevel: null,
        miteminitvalue: null,
        thresholdid: null,
        mitemtime: null,
        mitemunit: null,
        mitemishistory: null,
        mitemisenergy: null,
        mitemisalarm: null,
        mitemmaths: null,
        subsysalarmlevel: null,
        subsysalarmdescribe: null,
        subsysalarmtype: null,
        subsysalarmonoff: null,
        subsysalarmdeviation: null,
        subsysalarmdeviationinitvalue: null,
        subsysalarmminimini: null,
        subsysalarmmini: null,
        subsysalarmmax: null,
        subsysalarmmaxmax: null,
        subsysalarmsleep: null,
        subsysalarmcss: null,
        subsysalarmsort: null
      },
      formLabelWidth: '90px',
      mitemdatatypeData: [
        { label: '离散型', value: 0 },
        { label: '长整型', value: 1 },
        { label: '浮点型', value: 2 },
        { label: '字符串', value: 3 }
      ],
      mitemreadorwriteData: [
        { label: '读类型', value: 0 },
        { label: '读写类型', value: 1 }
      ],
      thresholdidData: [],
      mitemishistoryData: [
        { label: '无历史存储', value: 0 },
        { label: '历史存储', value: 1 }
      ],
      mitemisenergyData: [
        { label: '不参与能耗', value: 0 },
        { label: '参与能耗', value: 1 }
      ],
      mitemisalarmData: [
        { label: '不报警', value: 0 },
        { label: '报警', value: 1 }
      ],
      subsysalarmlevelData: [
        { label: '高', value: 0 },
        { label: '中', value: 1 },
        { label: '低', value: 2 }
      ],
      subsysalarmsortData: [
        { label: '报警', value: 0 },
        { label: '故障', value: 1 }
      ],
      subsysalarmtypeData: [
        { label: '开关报警', value: 0 },
        { label: '偏移报警', value: 1 },
        { label: '范围报警', value: 2 }
      ],
      subsysalarmonoffData: [
        { label: '未选择', value: -1 },
        { label: '关报警', value: 0 },
        { label: '开报警', value: 1 },
        { label: '变位报警', value: 2 }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.botData = getData('BotData')
    this.getSubSysInfo()
    this.getSubModeList()
    this.getThresholdList()
  }, // 生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
    this.setTableHeight()
    window.onresize = () => {
      this.setTableHeight()
    }
  }, // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    // 动态设置表格高
    setTableHeight() {
      let num = $('.right-container').height() - 203
      this.maxHeight = num
    },
    // 表头颜色
    // tableHeaderColor() {
    //   return 'padding:5px 0;background-color:#f2f2f2;font-wight:400'
    // },
    /* 左侧树形数据操作 */
    // 获取类型列表
    async getSubSysInfo() {
      this.treeLoading = true
      try {
        const { data } = await getSubSysInfo()
        this.treeData = data
      } catch (error) {
        console.log(error)
      } finally {
        this.treeLoading = false
      }
    },
    // 搜索事件
    filterNode(value, data) {
      if (!value) return true
      if (data.children) return false
      return data.subsysname.indexOf(value) !== -1
    },
    // 展开或折叠
    // setAllExpand(state) {
    //   var nodes = this.$refs.tree.store.nodesMap
    //   for (var i in nodes) {
    //     nodes[i].expanded = state
    //   }
    // },
    // 节点点击事件
    handleNodeClick(data) {
      if (data.subsysparent !== -1) {
        this.searchFrom.subsysname = data.subsysname
        this.searchFrom.subsystemid = data.subsystemid
        this.getSubModeList()
      }
    },

    /* 右侧列表操作 */
    // 获取设备数据列表
    async getSubModeList() {
      const obj = {
        submodemanager: {
          appid: this.botData.id,
          subsystemid: this.searchFrom.subsystemid,
          mitemname: this.searchFrom.mitemname
        },
        pages: {
          page: this.pages.page,
          size: this.pages.size
        }
      }
      try {
        this.loading = true
        const { data } = await getSubModeList(obj)
        this.tableData = data.records
        this.pages.page = data.current
        this.pages.size = data.size
        this.pages.total = data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 获取阈值数据
    async getThresholdList() {
      const { data } = await getThresholdList()
      this.thresholdidData = data
      this.thresholdidData.unshift({ thresholdname: '未选择', thresholdid: 0 })
    },

    // 重置按钮
    refresh() {
      this.searchFrom.subsystemid = ''
      this.searchFrom.mitemname = ''
      this.searchFrom.subsysname = ''
      this.getSubModeList()
    },

    // 添加按钮
    addItemsBtn() {
      if (!this.searchFrom.subsysname) {
        this.$message.warning('请先选着需要添加的类型!')
      } else {
        this.addDialogForm.appid = this.botData.id
        this.addDialogForm.subsystemid = this.searchFrom.subsystemid
        this.addDialogState = 0
        this.dialogTitle = '添加类型模板'
        this.dialogVisible = true
      }
    },

    /* table选择事件 */
    handleSelectionChange(val) {
      let nowArr = []
      console.log(val)
      val.forEach(item => {
        nowArr.push(item.subsysmodeid)
      })
      this.isCheckedArr = nowArr
    },

    // 批量删除
    async batchRemove() {
      if (this.isCheckedArr.length > 0) {
        this.$confirm('此操作将删除所选项目, 是否继续?', '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            if (this.isCheckedArr.length === this.tableData.length) {
              if (this.pages.page > 1) {
                this.pages.page--
              } else {
                this.pages.page = 1
              }
            }
            const { message } = await deleteSubModeList(this.isCheckedArr)
            await this.getSubModeList()
            this.$message.success({ message })
          })
          .catch(error => {
            console.log(error)
            this.$refs.table.clearSelection()
          })
      } else {
        this.$message.warning('请选择需要删除的项目')
      }
    },

    /* 弹出框事件 */
    // 关闭
    addDialogClose() {
      this.addDialogForm = {
        appid: null,
        subsystemid: null,
        mitemname: null,
        mitemdatatype: null,
        mitemreadorwrite: null,
        mitemnum: null,
        mitemnumdescribe: null,
        mitemlevel: null,
        miteminitvalue: null,
        thresholdid: null,
        mitemtime: null,
        mitemunit: null,
        mitemishistory: null,
        mitemisenergy: null,
        mitemisalarm: null,
        mitemmaths: null,
        subsysalarmlevel: null,
        subsysalarmdescribe: null,
        subsysalarmtype: null,
        subsysalarmonoff: null,
        subsysalarmdeviation: null,
        subsysalarmdeviationinitvalue: null,
        subsysalarmminimini: null,
        subsysalarmmini: null,
        subsysalarmmax: null,
        subsysalarmmaxmax: null,
        subsysalarmsleep: null,
        subsysalarmcss: null,
        subsysalarmsort: null
      }
      this.dialogTitle = ''
    },
    // 确定
    async sendAddItem() {
      try {
        const { message } = await addSubModeItem(this.addDialogForm)
        this.$message.success(message)
      } catch (error) {
        console.log(error)
      } finally {
        if (this.tableData.length === this.pages.size) {
          this.pages.page++
        }
        this.getSubModeList()
        this.dialogVisible = false
      }
    },
    // 提交
    async sendEditItem() {
      try {
        const { message } = await editSubModeItme(this.addDialogForm)
        this.$message.success(message)
      } catch (error) {
        console.log(error)
      } finally {
        this.dialogVisible = false
        this.getSubModeList()
      }
    },

    /* tabel-item 操作 */
    // 编辑
    handleEdit(data) {
      this.addDialogForm = { ...data }
      this.addDialogState = 1
      this.dialogTitle = '编辑类型模板'
      this.dialogVisible = true
    },
    // 删除
    handleDetele(data) {
      this.$confirm('此操作将删除当前项目, 是否继续?', '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const { message } = await deteleSubModeItme(data.subsysmodeid)
          if (this.tableData.length === 1) {
            if (this.pages.page > 1) {
              this.pages.page--
            } else {
              this.pages.page = 1
            }
          }
          await this.getSubModeList()
          this.$message.success({ message })
        })
        .catch(error => {
          console.log(error)
        })
    },

    /* 分页操作 */
    // 分页当前页切换
    async handleCurrentChange(newPage) {
      this.pages.page = newPage
      await this.getSubModeList()
    },
    // 分页显示条数切换
    async handleSizeChange(newSize) {
      this.pages.size = newSize
      await this.getSubModeList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 15px 20px;
}
::v-deep .el-divider {
  margin: 14px 0 !important;
}

#SubModeManager {
  .app-container {
    .left {
      .item-box {
        height: calc(100vh - 92px);
        overflow: auto;
        .tree-search {
          margin-bottom: 10px;
        }
      }
    }
    .right {
      .right-container {
        height: calc(100vh - 92px);
        .search {
          border: 1px solid #dcdfe6;
          border-top: none;
          padding: 34px 10px 10px 10px;
          margin-top: -14px;
          .el-input {
            width: 240px;
          }
          .el-button {
            margin-left: 20px;
          }
        }
        .btns {
          padding: 10px 0;
        }
      }
    }
  }
  .add-dialog-container {
    min-width: 980px;
    .el-input,
    .el-select {
      width: calc(100% - 10px);
    }
    .el-row {
      margin: 5px 0;
    }
    .alone {
      position: relative;
      width: 25%;
      .U {
        width: 80px;
        font-size: 16px;
        margin-left: 10px;
        position: absolute;
        top: 0;
      }
    }
    .one {
      .el-divider__text {
        padding: 2px 20px;
        background-color: #1a73e8;
        color: #f9f9f9;
      }
    }
    .two {
      .el-divider__text {
        padding: 2px 20px;
        background-color: #c09553;
        color: #f9f9f9;
      }
    }
  }
}
</style>
